<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>用户管理</title>
  		<script src="${ctx}/static/js/jquery.validate.min.js"></script>
		<script src="${ctx}/static/js/messages_bs_zh.js"></script>
     	<link rel="stylesheet" href="${ctx}/static/uploadify/uploadify.css" />
		<link rel="stylesheet" href="${ctx}/static/jcrop/jquery.Jcrop.min.css" />
	    <script src="${ctx}/static/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	    <script src="${ctx}/static/jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>
	  	
  <style type="text/css">
  	h3{
  		margin-top:5px;
  	}
  	.jcrop-holder #preview-pane {
		  display: block;
		  position: absolute;
		  z-index: 2000;
		  top: 10px;
		  right: -280px;
		  padding: 6px;
		  border: 1px rgba(0,0,0,.4) solid;
		  background-color: white;
		
		  -webkit-border-radius: 6px;
		  -moz-border-radius: 6px;
		  border-radius: 6px;
		
		  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		}

		/* The Javascript code will set the aspect ratio of the crop
		   area based on the size of the thumbnail preview,
		   specified here */
		#preview-pane .preview-container {
		  width: 360px;
		  height: 180px;
		  overflow: hidden;
		}
  </style>
</head>

<body>

	<div class="main-content-inner">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">用户</li>
			</ul><!-- /.breadcrumb -->
	
		</div>	
		<!-- /section:basics/content.breadcrumbs -->
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					用户
				</h1>
			</div><!-- /.page-header -->			
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<!-- " -->
							<form id="inputForm" action="${ctx}/customor/update"  method="post" class="form-horizontal">
								<h3>基本信息</h3>
								<input type="hidden" name="id" id="id" value="${customor.id}"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 账号: </label>
									<div class="col-sm-9">
										<input type="text" autocomplete="off" id="user_loginName" readonly="readonly"  name="customor.user.loginName"  value="${customor.user.loginName}" placeholder="账号" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 负责人: </label>
									<div class="col-sm-9">
										<input type="text" autocomplete="off" id="user_name" name="customorname"  value="${customor.user.name}" placeholder="负责人姓名" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">电话: </label>
									<div class="col-sm-9">
										<input type="text" autocomplete="off" id="user_mobile" name="customor.user.mobile" readonly="readonly"  value="${customor.user.mobile}" placeholder="用户电话" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="shtCity.id"> 所属城市: </label>
									<div class="col-sm-4">
										<select class="form-control required" id="shtCityId" name="shtCityId" >
											<c:forEach items="${citys}" var="city">
											<option value="${city.id}" <c:if test="${city.id == customor.shtCity.id}">selected="selected"</c:if> >${city.name}</option>
											</c:forEach>
										</select>
									</div>
								</div>
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">公司名称: </label>
										<div class="col-sm-9">
											<input type="text" maxlength="50" autocomplete="off" id="companyname" name="distributor.companyName" value="${customor.distributor.companyName}" placeholder="公司名称" class="col-xs-10 col-sm-5 required"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">公司地址: </label>
										<div class="col-sm-9">
											<input type="text" maxlength="50" autocomplete="off" id="distributor.address" name="distributor.address"  value="${customor.distributor.address}" placeholder="公司地址" class="col-xs-10 col-sm-5 required"/>
										</div>
									</div>									
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">审核状态: </label>
										<div class="col-sm-2">
											<select class="chosen-select form-control required" id="checkstatus" name="checkstatus" data-placeholder="审核状态">
												<option value="1" <c:if test="${customor.auditstatus eq '2'}">hidden=hidden</c:if> <c:if test="${customor.auditstatus eq 1}">selected="selected"</c:if>>待审</option>
												<option value="2" <c:if test="${customor.auditstatus eq '2'}">selected="selected"</c:if>>通过</option>
											</select>
										</div>
									</div>	
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">店铺类型: </label>
										<div class="col-sm-2" style="margin-top:7px">
											<input type="radio" style="margin-left:10px" name="distributor.direct" value="1" <c:if test="${customor.distributor.direct eq '1' }">checked="checked"</c:if>> 直营
											<input type="radio" style="margin-left:30px" name="distributor.direct" value="0" <c:if test="${customor.distributor.direct eq '0' }">checked="checked"</c:if>> 加盟
										</div>
									</div>								
									<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="duallist">营业执照：</label>
									<div class="col-sm-4">
									    
										<ul id="imageList" class="ace-thumbnails clearfix">
											<!-- #section:pages/gallery -->
											<c:forEach items="${customor.distributor.licencePhoto}" var="image" varStatus="status">
												<li>
													<img width="360" name="images1" height="180" alt="360x180" src="${customor.distributor.licencePhoto}" title="123"/>
													<input type="hidden" id="images" name="images" value="${customor.distributor.licencePhoto}"/>
													<div class="tools tools-bottom">
														<a href="javascript:void(0);" onclick="del_image(this)">
															<i class="ace-icon fa fa-times red"></i>
														</a>
													</div>
												</li>
											</c:forEach>
										</ul>
										
										<button id="upPicButton" data-toggle="modal" data-target="#modal-form" class="btn btn-app btn-purple btn-sm" type="button">
												<i class="ace-icon fa fa-cloud-upload bigger-200"></i>
												上传照片
										</button>
									
									</div>
								</div>
								
								<!-- Page's button -->
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<shiro:hasPermission name="user:alluser:updateinfo">
											<button id="submit_btn" class="btn btn-info" type="submit">
												<i class="ace-icon fa fa-check bigger-110"></i>
												保存
											</button>
										</shiro:hasPermission>
										&nbsp; &nbsp; &nbsp;
									<shiro:hasPermission name="user:alluser:updateinfo">
										<c:if test="${customor.outservice != '1' }">										
											<button id="stopserkvice" class="btn" type="reset">
												<i class="ace-icon fa fa-undo bigger-110"></i>
												暂停服务
											</button>
										</c:if>
										<c:if test="${customor.outservice eq '1' }">
											<button id="renewservice" class="btn btn-info" type="reset">
												<i class="ace-icon fa fa-check bigger-110"></i>
												恢复服务
											</button>
										</c:if>
										</shiro:hasPermission>
										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>
									</div>
								</div>
								
							</form>
							<!-- Picture upload -->
							 <div id="modal-form" class="modal" tabindex="-1">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="blue bigger">上传图片</h4>
										</div>

										<div class="modal-body">
											<div class="row">
												<div class="col-xs-12 col-sm-12 center">
													<span class="profile-picture"> 
														<div id="preview-pane">
						  									<div class="preview-container">
															<img class="jcrop-preview" id="avatar2" src="" style="display: none;"/>											
															</div>
														</div>
													</span>
						
													<div class="space space-4"></div>
						
													<input id="file_upload" name="file_upload" type="file" multiple="true">
						
													<img id="mypic" alt="" src="">	
						
												</div>
											</div>
										</div>
										<div class="modal-footer">
											<button class="btn btn-sm" data-dismiss="modal">
												<i class="ace-icon fa fa-times"></i>
												取消
											</button>

											<button class="btn btn-sm btn-primary" onclick="cutPic()">
												<i class="ace-icon fa fa-check"></i>
												确定
											</button>
										</div>
									</div>
								</div>
							</div>
							
							<!-- Picture upload -->
							
						</div>
					</div>			
				</div>
			</div>
			
		</div><!-- /.page-content -->
	</div>



	<!-- inline scripts related to this page -->

<%-- 	<script src="${ctx}/static/js/jquery.validate.min.js"></script> --%>
<%-- 	<script src="${ctx}/static/js/messages_bs_zh.js"></script> --%>

	<script>
		$(document).ready(function() {
			var jcrop_api,
			boundx,
			boundy;
			//聚焦第一个输入框
			$("#user_loginName").focus();
			
			//为inputForm注册validate函数
			$("#inputForm").validate({
				onsubmit:true,
				rules:{
					idCard:{
						maxlength:18,
						minlength:18
					},
					mobile:{
						maxlength:11,
						minlength:11,
						remote: "${ctx}/customor/checkmobile?userId=" + $("#id").val()
					},
					loginName:{
						maxlength:11,
						minlength:5,
						remote: "${ctx}/customor/checkLoginName?userId=" + $("#id").val()
					},
					distrubutorType:{
						required:true,
						minlength:1
					},
					businessType:{
						required:true,
						minlength:1
					}
				},
				messages: {
					mobile: {
						remote: "手机号已存在"
					},
					loginName: {
						remote: "用户账号已存在"
					}
				}
			});
			
		});
		
		function alerta(){
			document.getElementById('inputForm').submit();
		}
		
		  //省市联动
		 $("#shtProvinceId").change(
				function() {
					$("#shtCityId").empty();
					$.ajax({
						type:'get',
						url:'${ctx}/api/v1/truck/citys',
						data:'pid=' + $(this).val(),
						success:function(data) {    
					        console.log(data);
					        $("#shtCityId").append("<option value=''>请选择</option>");
					        for(var i=0; i< data.length; i++) {
					        	$("#shtCityId").append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
					        }
					     }
					});
				}
		);
		  //市区联动
		 $("#shtCityId").change(
				function() {
					$("#shtDistrictId").empty();
					$.ajax({
						type:'get',
						url:'${ctx}/api/v1/truck/districts',
						data:'pid=' + $("#shtProvinceId").val()+'&cid='+$(this).val(),
						success:function(data) {    
					        console.log(data);
					        $("#shtDistrictId").append("<option value='0'>请选择</option>");
					        for(var i=0; i< data.length; i++) {
					        	$("#shtDistrictId").append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
					        }
					     }
					});
				}
		);
		//form提交前，验证：营销活动最少选择两个
		function check(){
		    if(true){
		        return false;
		    }else{
		        return true;//不写此返回值也行，此时就直接提交了
		    }
		}
		if($("#imageList li").length > 1) {
			$('#upPicButton').hide();
		}
		
		
		$preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
	
		$('#file_upload').uploadify({
			'buttonText' : '上传图片', 
			'swf'      : '${ctx}/static/uploadify/uploadify.swf',
			'uploader' : '${ctx}/ajax/fileUpload?type=3&id=1',
			'fileSizeLimit':1*1024*1024, 
			'fileObjName'   : 'file',  
			'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
			'removeCompleted'	: true,
			'width'	: '100%',
			'buttonClass'	: "btn btn-info",
            'onUploadSuccess' : function(file, data, response) {  
                console.log(data);
                $('#avatar2').show();
                $('#avatar2').attr("src", data);
                imageFile=data;
                jcrop_api.setImage(data);                   
            } ,
            'onInit': function () {
                $("#file_upload-queue").hide();
            }
		});
		
		$('#mypic').Jcrop({
			onChange:   setCoords,
		    onSelect:   setCoords,
		    aspectRatio: xsize / ysize,
			boxWidth: 360,
			boxHeight: 180,
			minSize: [ 36, 20 ],
	        maxSize: [ 3600, 2000 ]
        },function(){            	
        	jcrop_api = this;
        });
       
     var imageFile, x=0,y=0,w=200,h=150;
		
	 function cutPic() {
	    	$.ajax({
				type:'get',
				url:'${ctx}/ajax/newPicCut',
				data:'imageFile='+ imageFile + '&x=' + x + '&y=' + y + '&w=' + w + '&h=' + h,
				success:function(data) {    
					if(data != 'error') {
// 						$('#imageList').append('<li> \
// 							<img width="360" height="180" alt="360x180" src="' + data + '" /> \
// 								<input type="hidden" name="images" value="'+ data+'"/> \
// 								<div class="tools tools-bottom"> \
// 									<a href="javascript:void(0);" onclick="del_image(this)"> \
// 										<i class="ace-icon fa fa-times red"></i> \
// 									</a> \
// 								</div> \
// 							</li>');
						if(document.getElementById('images')){							
							$('#imageList').find("img").attr("src",data);
							document.getElementById('images').value=data;
						}else{
	 						$('#imageList').append('<li> \
							<img width="360" height="180" alt="360x180" src="' + data + '" /> \
								<input type="hidden" name="images" value="'+ data+'"/> \
								<div class="tools tools-bottom"> \
									<a href="javascript:void(0);" onclick="del_image(this)"> \
										<i class="ace-icon fa fa-times red"></i> \
									</a> \
								</div> \
							</li>');
						}
					}else {
						alert('图片格式错误,请转换相应格式！');
					}
			        
					if($("#imageList li").length > 1) {
						$('#upPicButton').hide();
					}else {
						$('#upPicButton').show();
					}
					
					jcrop_api.destroy();
					$('#mypic').Jcrop({
						onChange:   setCoords,
					    onSelect:   setCoords,
					    aspectRatio: xsize / ysize,
						boxWidth: 360,
						boxHeight: 180,
						minSize: [ 36, 20 ],
				        maxSize: [ 3600, 2000 ]
			        },function(){            	
			        	jcrop_api = this;
			        });
					
					$('#avatar2').hide();
			        $('#modal-form').modal('hide');
			    }
			});
	    }
		
		function setCoords(c)
	    {
	    	var bounds = jcrop_api.getBounds();
           boundx = bounds[0];
           boundy = bounds[1];
           
	        x=c.x;
	        y=c.y;
	        w=c.w;
	        h=c.h;
	        updatePreview(c);
	    };
	    
	    function updatePreview(c)
	    {
	      if (parseInt(c.w) > 0)
	      {
	        var rx = xsize / c.w;
	        var ry = ysize / c.h;

	        $pimg.css({
	          width: Math.round(rx * boundx) + 'px',
	          height: Math.round(ry * boundy) + 'px',
	          marginLeft: '-' + Math.round(rx * c.x) + 'px',
	          marginTop: '-' + Math.round(ry * c.y) + 'px'
	        });
	      }
	    };
		
		function del_image(obj) {
			$(obj).parent().parent().remove();
			$('#upPicButton').show();
		}
		/**暂停服务*/
		$("#stopserkvice").on("click",function(){
			$.ajax({
				type:'get',
				url:'${ctx}/customor/stopService',
				data:{customorid:$("#id").val()},
				success:function(data) {    
			        console.log(data);
					if(data =='0'){
						alert("内部出现错误，请联系维护人员");
						return;
					}
					if(data =='1'){
						alert("已成功暂停该加盟商服务");
						location.reload();
						return;
					}else{
						alert("程序出现错误，请联系维护人员");
						return;
					}
			     }
			});
		})
		/**恢复服务*/
		$("#renewservice").on("click",function(){
			$.ajax({
				type:'get',
				url:'${ctx}/customor/renewService',
				data:{customorid:$("#id").val()},
				success:function(data) {    
			        console.log(data);
					if(data =='0'){
						alert("内部出现错误，请联系维护人员");
						return;
					}
					if(data =='1'){
						alert("已成功恢复该加盟商服务");
						location.reload();
					}else{
						alert("程序内部出现错误，请联系维护人员");
						return;
					}
			     }
			});
		})
	</script>
</body>
</html>
